<template>
  <div class="admin-layout">
    <a-layout style="min-height: 100vh">
      <!-- 侧边栏 -->
      <a-layout-sider
        v-model:collapsed="collapsed"
        collapsible
        :trigger="null"
        :theme="theme"
        class="admin-sider"
      >
        <div class="logo">
          <img src="../../assets/images/logo.svg" alt="Logo" class="logo-img" />
          <h1 class="logo-text" v-if="!collapsed">新闻管理系统</h1>
        </div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          :theme="theme"
          mode="inline"
        >
          <a-menu-item key="dashboard">
            <template #icon>
              <dashboard-outlined />
            </template>
            <router-link to="/admin/dashboard">控制面板</router-link>
          </a-menu-item>
          <a-menu-item key="news">
            <template #icon>
              <file-text-outlined />
            </template>
            <router-link to="/admin/news">新闻管理</router-link>
          </a-menu-item>
          <a-menu-item key="create">
            <template #icon>
              <edit-outlined />
            </template>
            <router-link to="/admin/news/create">发布新闻</router-link>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      
      <a-layout>
        <!-- 头部 -->
        <a-layout-header class="admin-header">
          <div class="header-left">
            <a-button
              type="text"
              @click="collapsed = !collapsed"
              class="trigger-btn"
            >
              <menu-fold-outlined v-if="collapsed" />
              <menu-unfold-outlined v-else />
            </a-button>
          </div>
          <div class="header-right">
            <a-dropdown>
              <a class="admin-dropdown-link">
                <a-avatar :size="32" class="admin-avatar">
                  <template #icon><user-outlined /></template>
                </a-avatar>
                <span class="admin-name" v-if="!collapsed">{{ currentUserNickName }}</span>
                <down-outlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0">
                    <a @click="goToFrontend">前台首页</a>
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="1">
                    <a @click="handleLogout">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>
        
        <!-- 内容区 -->
        <a-layout-content class="admin-content">
          <div class="content-wrapper">
            <router-view />
          </div>
        </a-layout-content>
        
        <!-- 页脚 -->
        <a-layout-footer class="admin-footer">
          大学新闻网管理系统 &copy; {{ new Date().getFullYear() }}
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DashboardOutlined,
  FileTextOutlined,
  EditOutlined,
  UserOutlined,
  DownOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()

const currentUserNickName = ref('管理员') // 默认值或加载时的占位符

// 侧边栏折叠状态
const collapsed = ref(false)

// 主题
const theme = ref('dark')

// 根据当前路由计算选中的菜单项
const selectedKeys = computed(() => {
  const path = route.path
  if (path.includes('/admin/dashboard')) return ['dashboard']
  if (path.includes('/admin/news/create')) return ['create']
  if (path.includes('/admin/news')) return ['news']
  return []
})

// 跳转到前台
const goToFrontend = () => {
  router.push('/')
}

// 退出登录
const handleLogout = () => {
  // 清除token
  localStorage.removeItem('token')
  message.success('已退出登录')
  router.push('/admin/login')
}

// 检查登录状态
onMounted(() => {
  const token = localStorage.getItem('token')
  if (!token) {
    router.push('/admin/login')
  } else {
    const userInfoString = localStorage.getItem('userInfo')
    if (userInfoString) {
      try {
        const userInfo = JSON.parse(userInfoString)
        if (userInfo && userInfo.userNickName) {
          currentUserNickName.value = userInfo.userNickName
        }
      } catch (e) {
        console.error('Failed to parse userInfo from localStorage', e)
      }
    }
  }
})
</script>

<style scoped>
.admin-layout {
  height: 100%;
}

.admin-sider {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1);
  z-index: 10;
}

.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}

.logo-img {
  height: 32px;
  margin-right: 8px;
}

.logo-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

.admin-header {
  background: #fff;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trigger-btn {
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger-btn:hover {
  color: #1890ff;
}

.header-right {
  display: flex;
  align-items: center;
}

.admin-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.65);
}

.admin-name {
  margin-right: 4px;
}

.admin-content {
  margin: 24px 16px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
  border-radius: 2px;
}

.content-wrapper {
  padding: 0;
  background: #fff;
  min-height: 360px;
}

.admin-footer {
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
}
</style>